<template>
    <div id="secondsurvey">
        <el-scrollbar>
            <el-container style=" margin: 100px 200px 120px 120px; ">
                <el-header style="padding: 0%;" height="20px">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/firstsurvey' }">第一轮调查</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/secondsurvey' }"><span style="color: brown;">第二轮调查</span>
                        </el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/thirdsurvey' }">第三轮调查</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/forthsurvey' }">第四轮调查</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/thirdsurvey' }">
                            <!-- <span  style="font-weight: bolder;">可视化结果分析</span> -->
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </el-header>
                <el-container style="background-color: #ffffff;">
                    <el-header style="    font-size: large;
                    font-weight: bold; line-height: 60px;">第一轮调查结果分析</el-header>
                    <el-container direction='vertical'>
                        <!-- <el-aside width="800px" style="text-align: center;"> -->
                        <el-row :gutter="20">
                            <el-col :span="20" :offset="2" style="text-align:left;text-indent: 2em;">
                                从第一轮地调查结果中，我们发现约53.85%的人认为在一定合理的条件下，如加班工资合理，安排给自己的工作没有完成或者是紧急情况的加班等，是可以适当进行加班的；约38.46%的人认为如果不必要的话，尽量不加班，如果加班的话，是由于公司管理不当造成的结果；有个别人（7.69%）认为加班已经是常态，不可避免。
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="20" :offset="2" style="text-align:left;text-indent: 2em;">
                                约23.08%的专家对于加班的接受程度较低，觉得工作应该在正常上班期间内完成，加班剥夺了个人合法的休息时间，可能会伤害到个人的身心健康；约76.92%的专家对加班的接受程度较中等，认为合理自愿的加班是可以接受的。
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" style="text-align: center;margin: 15px auto 0;" type="flex" align="middle">
                            <el-col :span="1"> <span style="writing-mode:vertical-rl;  font-size: 20px;
                                color: #6c8296;">可视化云图</span></el-col>
                            <el-col :span="11">


                                <el-image style="width: 300px; height: 300px" :src="require('../../assets/cloud.png')"
                                    fit="fit">
                                </el-image>

                            </el-col>
                            <el-col :span="12">
                                <div id="bingtu" style="height:400px;width:500px;margin-top: 20px;"></div>
                            </el-col>
                        </el-row>
                    </el-container>
                    <el-footer style="line-height: 60px;    color: #f17878;
                    font-weight: bolder;">
                        <el-button style=" color: #f17878;
                    font-weight: bolder;" type="text" @click="goToAnchor('#seco')">点击填写第二轮调查问卷<i
                                class="el-icon-download"></i></el-button>

                    </el-footer>
                </el-container>
                <el-divider></el-divider>
                <el-header style="text-align: right; font-size: 12px;padding:0;" height="20px">

                    <i class="el-icon-user-solid" style="margin-right: 5px"></i>
                    <span style="color:white;font-size: 13px;">尊敬的{{user.userClass}}：{{user.name}} 您好</span>
                </el-header>
                <el-container id="seco">
                    <el-aside width="600px" style=" background: #0000007a;">
                        <p class="neon">相关资料背景说明</p>
                        <el-divider>请点击对应链接查看</el-divider>
                        <div class="text">
                            <el-link type="primary" class="ellink"
                                href="https://gkml.samr.gov.cn/nsjg/bgt/202106/t20210610_330502.html" target="_blank"
                                icon="el-icon-document">
                                中华人民共和国劳动法</el-link>
                            <el-link type="primary" class="ellink" href="http://mbivip.com/article/30427.html"
                                target="_blank" icon="el-icon-document">
                                那些工作一天八小时(95后不加班)</el-link>

                            <el-link type="primary" class="ellink" href="https://www.docin.com/p-2098755368.html"
                                target="_blank" icon="el-icon-document">
                                95后新蓝领现状报告 </el-link>

                            <el-link type="primary" class="ellink" href="https://zhuanlan.zhihu.com/p/412592478"
                                target="_blank" icon="el-icon-document">
                                如何管理“95后”员工？</el-link>
                            <el-link type="primary" class="ellink" href="https://user.guancha.cn/main/content?id=685736"
                                target="_blank" icon="el-icon-document">
                                我是95后：我不愿加班，谁爱加谁加</el-link>
                            <el-link type="primary" class="ellink" href="https://www.sohu.com/a/192725626_401170"
                                target="_blank" icon="el-icon-document">
                                95后成职场新生力量，你真的了解它们吗？ </el-link>
                            <el-link type="primary" class="ellink" href="https://zhuanlan.zhihu.com/p/146775658"
                                target="_blank" icon="el-icon-document">
                                202022年95后用户画像研究报告</el-link>
                            <el-link type="primary" class="ellink" href="https://zhuanlan.zhihu.com/p/412592478"
                                target="_blank" icon="el-icon-document">拒绝加班的95后
                            </el-link>
                            <el-link type="primary" class="ellink"
                                href="https://www.zhihu.com/question/464985765/answer/1941585464" target="_blank"
                                icon="el-icon-document">
                                现在的95后指挥不动，下班准时走，活安排不下去只能自己干，怎么办？ </el-link>
                            <el-link type="primary" class="ellink" href="https://v.qq.com/x/page/p09231tsmwe.html"
                                target="_blank" icon="el-icon-video-camera">
                                加班竟成95后消遣新方式 </el-link>
                            <el-link type="primary" class="ellink" href="https://36kr.com/video/1638732441023748"
                                target="_blank" icon="el-icon-video-camera">
                                95后设计师加班猝死，被“加班文化”加速“去世”的年轻人</el-link>
                            <el-link type="primary" class="ellink" href="https://v.qq.com/x/page/b3332rx9bv5.html"
                                target="_blank" icon="el-icon-video-camera">
                                95后加班直接开怼老板：到点了我不走，在这给你守灵啊！ </el-link>

                        </div>
                        <!-- <el-divider></el-divider> -->
                    </el-aside>
                    <el-main width="600px" style=" background: rgb(255 255 255 / 60%);">
                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px"
                            class="demo-ruleForm">
                            <el-container>
                                <el-container>
                                    <el-aside width="500px">
                                        <span>指标评价评分</span>
                                        <el-form-item label="加班工资" prop="wages">
                                            <el-radio-group v-model="ruleForm.wages">
                                                <el-radio label="2"></el-radio>
                                                <el-radio label="1"></el-radio>
                                                <el-radio label="0"></el-radio>
                                                <el-radio label="-1"></el-radio>
                                                <el-radio label="-2"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item label="补贴" prop="subsidy">
                                            <el-radio-group v-model="ruleForm.subsidy">
                                                <el-radio label="2"></el-radio>
                                                <el-radio label="1"></el-radio>
                                                <el-radio label="0"></el-radio>
                                                <el-radio label="-1"></el-radio>
                                                <el-radio label="-2"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item label="加班时间合理" prop="time">
                                            <el-radio-group v-model="ruleForm.time">
                                                <el-radio label="2"></el-radio>
                                                <el-radio label="1"></el-radio>
                                                <el-radio label="0"></el-radio>
                                                <el-radio label="-1"></el-radio>
                                                <el-radio label="-2"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item label="加班频率合理" prop="frequency">
                                            <el-radio-group v-model="ruleForm.frequency">
                                                <el-radio label="2"></el-radio>
                                                <el-radio label="1"></el-radio>
                                                <el-radio label="0"></el-radio>
                                                <el-radio label="-1"></el-radio>
                                                <el-radio label="-2"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item label="身体条件允许" prop="health">
                                            <el-radio-group v-model="ruleForm.health">
                                                <el-radio label="2"></el-radio>
                                                <el-radio label="1"></el-radio>
                                                <el-radio label="0"></el-radio>
                                                <el-radio label="-1"></el-radio>
                                                <el-radio label="-2"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item label="自己工作任务没完成" prop="task">
                                            <el-radio-group v-model="ruleForm.task">
                                                <el-radio label="2"></el-radio>
                                                <el-radio label="1"></el-radio>
                                                <el-radio label="0"></el-radio>
                                                <el-radio label="-1"></el-radio>
                                                <el-radio label="-2"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item label="工作氛围" prop="atmosphere">
                                            <el-radio-group v-model="ruleForm.atmosphere">
                                                <el-radio label="2"></el-radio>
                                                <el-radio label="1"></el-radio>
                                                <el-radio label="0"></el-radio>
                                                <el-radio label="-1"></el-radio>
                                                <el-radio label="-2"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item label="对个人生活影响不大" prop="life">
                                            <el-radio-group v-model="ruleForm.life">
                                                <el-radio label="2"></el-radio>
                                                <el-radio label="1"></el-radio>
                                                <el-radio label="0"></el-radio>
                                                <el-radio label="-1"></el-radio>
                                                <el-radio label="-2"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item label="加班原因合理" prop="cause">
                                            <el-radio-group v-model="ruleForm.cause">
                                                <el-radio label="2"></el-radio>
                                                <el-radio label="1"></el-radio>
                                                <el-radio label="0"></el-radio>
                                                <el-radio label="-1"></el-radio>
                                                <el-radio label="-2"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>

                                    </el-aside>
                                    <el-main style="padding: 0px 0px 0px 95px;text-align:left;">
                                        <span>相对重要性</span>
                                        <el-form-item prop="imwages" label-width="0">
                                            <el-radio-group v-model="ruleForm.imwages">
                                                <el-radio label="3"></el-radio>
                                                <el-radio label="2"></el-radio>
                                                <el-radio label="1"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item prop="imsubsidy" label-width="0">
                                            <el-radio-group v-model="ruleForm.imsubsidy">
                                                <el-radio label="3"></el-radio>
                                                <el-radio label="2"></el-radio>
                                                <el-radio label="1"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item prop="imtime" label-width="0">
                                            <el-radio-group v-model="ruleForm.imtime">
                                                <el-radio label="3"></el-radio>
                                                <el-radio label="2"></el-radio>
                                                <el-radio label="1"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item prop="imfrequency" label-width="0">
                                            <el-radio-group v-model="ruleForm.imfrequency">
                                                <el-radio label="3"></el-radio>
                                                <el-radio label="2"></el-radio>
                                                <el-radio label="1"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item prop="imhealth" label-width="0">
                                            <el-radio-group v-model="ruleForm.imhealth">
                                                <el-radio label="3"></el-radio>
                                                <el-radio label="2"></el-radio>
                                                <el-radio label="1"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item prop="imtask" label-width="0">
                                            <el-radio-group v-model="ruleForm.imtask">
                                                <el-radio label="3"></el-radio>
                                                <el-radio label="2"></el-radio>
                                                <el-radio label="1"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item prop="imatmosphere" label-width="0">
                                            <el-radio-group v-model="ruleForm.imatmosphere">
                                                <el-radio label="3"></el-radio>
                                                <el-radio label="2"></el-radio>
                                                <el-radio label="1"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item prop="imlife" label-width="0">
                                            <el-radio-group v-model="ruleForm.imlife">
                                                <el-radio label="3"></el-radio>
                                                <el-radio label="2"></el-radio>
                                                <el-radio label="1"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item prop="imcause" label-width="0">
                                            <el-radio-group v-model="ruleForm.imcause">
                                                <el-radio label="3"></el-radio>
                                                <el-radio label="2"></el-radio>
                                                <el-radio label="1"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </el-main>
                                </el-container>
                                <span
                                    style="text-align:left;color: rgb(255, 79, 79);">注释：“指标评价评分”指各指标对提高加班意愿的得分；“相对重要性”指指标对提高加班意愿的重要性排序，可相同</span>
                                <el-footer>
                                    <el-form-item>
                                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                                    </el-form-item>

                                </el-footer>
                            </el-container>
                        </el-form>
                    </el-main>
                </el-container>
            </el-container>
        </el-scrollbar>
    </div>
</template>

<script>
    import axios from "axios";
    import * as echarts from 'echarts';

    export default {
        data() {
            return {
                src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
                ruleForm: {
                    wages: '',
                    imwages: '',
                    subsidy: '',
                    imsubsidy: '',
                    time: '',
                    imtime: '',
                    frequency: '',
                    imfrequency: '',
                    health: '',
                    imhealth: '',
                    task: '',
                    imtask: '',
                    atmosphere: '',
                    imatmosphere: '',
                    life: '',
                    imlife: '',
                    cause: '',
                    imcause: ''
                },
                user: {
                    userClass: '',
                    name: ''
                },
                rules: {

                    wages: [
                        { required: true, message: '请选择评分', trigger: 'change' }
                    ],
                    imwages: [
                        { required: true, message: '请选择相对重要性', trigger: 'change' }
                    ],
                    subsidy: [
                        { required: true, message: '请选择评分', trigger: 'change' }
                    ],
                    imsubsidy: [
                        { required: true, message: '请选择相对重要性', trigger: 'change' }
                    ],
                    time: [
                        { required: true, message: '请选择评分', trigger: 'change' }
                    ],
                    imtime: [
                        { required: true, message: '请选择相对重要性', trigger: 'change' }
                    ],
                    frequency: [
                        { required: true, message: '请选择评分', trigger: 'change' }
                    ],
                    imfrequency: [
                        { required: true, message: '请选择相对重要性', trigger: 'change' }
                    ],
                    health: [
                        { required: true, message: '请选择评分', trigger: 'change' }
                    ],
                    imhealth: [
                        { required: true, message: '请选择相对重要性', trigger: 'change' }
                    ],
                    task: [
                        { required: true, message: '请选择评分', trigger: 'change' }
                    ],
                    imtask: [
                        { required: true, message: '请选择相对重要性', trigger: 'change' }
                    ],
                    atmosphere: [
                        { required: true, message: '请选择评分', trigger: 'change' }
                    ],
                    imatmosphere: [
                        { required: true, message: '请选择相对重要性', trigger: 'change' }
                    ],
                    life: [
                        { required: true, message: '请选择评分', trigger: 'change' }
                    ],
                    imlife: [
                        { required: true, message: '请选择相对重要性', trigger: 'change' }
                    ],
                    cause: [
                        { required: true, message: '请选择评分', trigger: 'change' }
                    ],
                    imcause: [
                        { required: true, message: '请选择相对重要性', trigger: 'change' }
                    ],
                }
            }
        },
        created() {
            // 如果是跳转来的，则接受初始化参数
            this.getData();

            //         if (this.$route.query) {
            //     this.bookResult = this.$route.query.searchData;
            //     this.searchInfo = this.$route.query.searchInfo;
            //     this.blength = this.bookResult.length;
            //   }
        },
        mounted() {
            this.createBingtu();
        },
        methods: {
            goToAnchor(selector) {
                this.$el.querySelector(selector).scrollIntoView();
            },
            createBingtu() {
                const self = this;
                var chartDom = document.getElementById('bingtu');
                var myChart = this.$echarts.init(chartDom);
                var option;
                option = {
                    title: {
                        text: '愿意加班的条件',
                        subtext: '结果可视化',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)",

                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right'
                    },
                    series: [
                        {
                            name: '愿意加班的条件',
                            type: 'pie',
                            radius: '60%',
                            center: ['40%', '50%'],
                            label: {
                                normal: {
                                    show: true,
                                    position: 'inside',
                                    formatter: '{d}%',//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比

                                    textStyle: {
                                        align: 'center',
                                        baseline: 'middle',
                                        fontFamily: '微软雅黑',
                                        fontSize: 12,
                                        fontWeight: 'bolder'
                                    }
                                },
                            },

                            data: [
                                { value: 12, name: '合法的加班费' },
                                { value: 5, name: '加班时间和工作量合理' },
                                { value: 3, name: '员工福利补贴' },
                                { value: 3, name: '没有强制性' },
                                { value: 2, name: '自己工作没完成' },
                                { value: 4, name: '不影响个人生活和身体健康' }
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                option && myChart.setOption(option);
            },
            getData() {
                var User = JSON.parse(sessionStorage.getItem('user'));
                this.user.name = User.uname;
                if (User.userClass == 'zuzhizhe') {
                    this.user.userClass = '组织者';
                } else if (User.userClass == 'zhuanjia') {
                    this.user.userClass = '专家';
                } else if (User.userClass == '游客') {
                    this.user.userClass = '游客';
                    this.user.name = NULL
                }
                else {
                    this.user.userClass = NULL;
                }
            },
            submitForm(formName) {
                var User = JSON.parse(sessionStorage.getItem('user'));
                //if(User.id=='0'){alert("You should log in first!")}//设置必须登录才能答题
                //else{
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //要传到后端的数据
                        var answer = {
                            id: User.id,
                            wages: this.ruleForm.wages,
                            imwages: this.ruleForm.imwages,
                            subsidy: this.ruleForm.subsidy,
                            imsubsidy: this.ruleForm.imsubsidy,
                            time: this.ruleForm.time,
                            imtime: this.ruleForm.imtime,
                            frequency: this.ruleForm.frequency,
                            imfrequency: this.ruleForm.imfrequency,
                            health: this.ruleForm.health,
                            imhealth: this.ruleForm.imhealth,
                            task: this.ruleForm.task,
                            imtask: this.ruleForm.imtask,
                            atmosphere: this.ruleForm.atmosphere,
                            imatmosphere: this.ruleForm.imatmosphere,
                            life: this.ruleForm.life,
                            imlife: this.ruleForm.imlife,
                            cause: this.ruleForm.cause,
                            imcause: this.ruleForm.imcause
                        }
                        var that = this;
                        // 对应 Python 提供的接口，这里的地址填写下面服务器运行的地址，本地则为127.0.0.1，外网则为 your_ip_address
                        const path = 'http://d532612h14.51vip.biz:54260/addAnswer2nd';
                        axios({
                            method: 'post',
                            url: path,
                            data: answer
                        }).then(function (response) {
                            that.$message({
                                message: 'Successfully saved!',
                                type: 'success'
                            });

                        }).catch(function (error) {
                            console.log('Error' + error);
                            that.$message.error('提交错误请重试！！');
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
                //}
            },

            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>


<style scoped>
    #secondsurvey {
        min-width: 1500px;
        height: 100%;
        background: url(../../assets/bg.jpg) no-repeat;
        background-size: cover;
        /* position: absolute; */
        background-attachment: fixed;

    }



    .text {
        width: 600px;
        /* height: 500px; */
        color: white;
        align-items: center;
        padding-top: 2px;
    }


    .neon {
        color: #cce7f8;
        font-size: 28px;
        margin: 30px auto;
        -webkit-animation: shining 0.5s alternate infinite;
        animation: shining 0.5s alternate infinite;
    }

    @keyframes shining {
        from {
            text-shadow: 0 0 5px lightblue, 0 0 5px lightblue, 0 0 30px lightblue, 0 0 40px skyblue, 0 0 50px skyblue, 0 0 60px skyblue;
        }

        to {
            text-shadow: 0 0 5px lightblue, 0 0 10px lightblue, 0 0 15px lightblue, 0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue;
        }
    }

    .ellink {
        color: white;
        font-size: 16px;
        margin: 20px 0;
        display: block;
    }


    .title {
        margin: 0px auto 40px auto;
        text-align: center;
    }

    .remember {
        margin: 0px 0px 35px 0px;
    }
</style>